<script setup lang="ts">
// 1:下载axios
// 2:导入axios
// 3:进入页面调用接口获取数据
// 4：定义数据的类型，存储并渲染
import axios from 'axios'
import { onMounted, ref } from 'vue'
import type { channelsApi, channelsItem } from '../types/channels'
import { useChannel } from '../store/channel'
const store = useChannel()
const list = ref<channelsItem[]>([])
const getData = async () => {
  const res = await axios<channelsApi>({
    url: 'http://geek.itheima.net/v1_0/channels'
  })
  list.value = res.data.data.channels
  store.setChannelId(res.data.data.channels[0].id)
  // emits('setChannelId', res.data.data.channels[0].id)
  console.log('菜单栏', res)
}
// 接收 channelId
// const props = defineProps<{
//   channelId: number
// }>()
// 接收修改id方法
// const emits = defineEmits<{
//   (e: 'setChannelId', id: number): void
// }>()

onMounted(() => {
  getData()
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        @click="store.setChannelId(item.id)"
        class="item"
        :class="{ active: item.id === store.channelId }"
        href="javascript:;"
        v-for="item in list"
        :key="item.id"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
